<template>
  <div class="permission">
    <el-card>
      <el-row>
        <el-col style="text-align:right">
          <el-button type="primary" @click="openAdd(1, '0')" size="mini">
            <i class="el-icon-edit"></i> 添加菜单</el-button
          >
        </el-col>
      </el-row>

      <el-table :data="perList" row-key="id">
        <el-table-column prop="name" label="菜单名称"> </el-table-column>
        <el-table-column prop="code" label="权限标识"> </el-table-column>
        <el-table-column prop="description" label="描述"> </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button
              type="text"
              v-if="row.type === 1"
              @click="openAdd(2, row.id)"
              >添加权限点</el-button
            >
            <el-button type="text">查看api权限</el-button>
            <el-button type="text" @click="openPanel(row.id)">查看</el-button>
            <el-button type="text" @click="delPermission(row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <mypanel ref="mypanel" :showDialog.sync="showDialog"></mypanel>
  </div>
</template>

<script>
import { getAllPermissionApi, delPermissionByIdApi } from '@/api/permission.js'
export default {
  name: 'permission',
  components: {
    mypanel: () => import('./components/panel.vue')
  },
  data () {
    return {
      perList: [
        {
          id: 1,
          name: '员工管理',
          mark: 'employees',
          des: '用户管理菜单',
          children: [
            {
              id: 1 - 1,
              name: '用户修改按钮',
              mark: 'POINT-USER-UPDATE',
              des: '用户修改按钮'
            }
          ]
        }
      ],
      showDialog: false
    }
  },
  methods: {
    async getAllExpression () {
      const res = await getAllPermissionApi()
      // console.log(res);
      this.perList = this.turnData(res.data, '0')
    },
    turnData (arr, pid) {
      const newArr = []
      arr.forEach(item => {
        if (item.pid === pid) {
          const children = this.turnData(arr, item.id)
          if (children.length > 0) {
            item.children = children
          }
          newArr.push(item)
        }
      })
      return newArr
    },
    async delPermission (id) {
      await this.$confirm('请确认是否删除?', '温馨提示')
      await delPermissionByIdApi(id)
      this.$message.success('删除成功')
      this.getAllExpression()
    },
    openPanel (id) {
      this.showDialog = true
      this.$refs.mypanel.getAllPermission(id)
    },
    openAdd(type,pid) {
       this.showDialog = true
       this.$refs.mypanel.setProp(type,pid)
    }
  },
  created () {
    this.getAllExpression()
  }
}
</script>

<style lang="scss">
.permission {
  margin: 20px;
}
</style>
